<template>
  <div align="center">
    <h1>这是 GoodsList 组件</h1>
    <!--创建一个echarts的容器-->
    <div id="echartContainer"
         style="width:500px; height:500px">
    </div>
    <div id="echartContainer2"
         style="width:500px; height:500px">
    </div>
  </div>
</template>


<script>
//引入echarts
var echarts = require('echarts')
export default {
  data () {
    return {
      info: null,
      loading: true,
      errored: false,
      tableData: [],
      deptNameArr: [],
      deptNoArr: [],
      myChart2Arr: []
    };
  },
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echartContainer'), 'light');
    // 绘制图表
    myChart.setOption({
      title: { text: '自动样式dark' },
      tooltip: {},
      xAxis: {
        data: []
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: []
      }],
      // 高亮样式。
      emphasis: {
        itemStyle: {
          // 高亮时点的颜色。
          color: 'yellow'
        },
        label: {
          show: true,
          // 高亮时标签的文字。
          formatter: '666'
        }
      }
    });

    //第2张图

        // 基于准备好的dom，初始化echarts实例
        var myChart2 = echarts.init(document.getElementById('echartContainer2'),'light');
    // 绘制图表
    myChart2.setOption({
      backgroundColor: 'white',
      textStyle: {
        //文字颜色
        color: 'black'
      },
      labelLine: {
        lineStyle: {
          //引导线颜色
          color: 'blue'
        }
      },
      itemStyle: {
        // 设置All扇形的颜色
        // color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
      title: { text: '自定义样式' },
      tooltip: {},
      series: {
        type: 'pie',
        data: [
          // {
          //   name: 'A',
          //   value: 100,
          //   //单个扇形颜色
          //   itemStyle: {
          //     color: 'blue'
          //   }
          // },
          // { name: 'B', value: 200 },
          // { name: 'C', value: 300 }
        ]
      }
    });

    //异步加载数据
    const axios = require('axios');
    axios
      .get('http://127.0.0.1:18001/jdbc/test/queryDept')
      .then(response => {
        //渲染表格
        this.tableData = response.data
        //笨方法 拿出需要的数据放入新数组
        for (let i = 0; i < response.data.length; i++) {
          this.deptNameArr[i] = response.data[i].DEPT_NAME;
          this.deptNoArr[i] = response.data[i].DEPT_NO;
        }
        // 柱状图填入数据
        myChart.setOption({
          xAxis: {
            //横坐标
            data: this.deptNameArr
          },
          series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            //纵坐标
            data: this.deptNoArr
          }]
        });


        //笨方法，拿出数据放入新建数组
        for (let index = 0; index < response.data.length; index++) {
          this.myChart2Arr.push({
            name: response.data[index].DEPT_NAME,
            value: response.data[index].DEPT_NO
          })
        }
        // 饼图填入数据
        myChart2.setOption({
          series: [{
            data: this.myChart2Arr
          }]
        });

      })
      .catch(error => {
        alert('无法获取DEPT数据')
        this.errored = true
      }
      )
      .finally(() => this.loading = false)
  }
}
</script>

<style scoped>
</style>
